<template>
  <wd-popup v-model="visible" position="bottom" closable>
    <wd-cell-group border :title="title">
      <view>
        <slot></slot>
      </view>
      <view class="flex justify-center px-2 py-1">
        <slot name="footer">
          <wd-button
            type="info"
            size="large"
            :round="false"
            class="flex-1 mr-2"
            @click="handleCancel"
          >
            取消
          </wd-button>
          <wd-button
            type="primary"
            size="large"
            :round="false"
            class="flex-1"
            @click="handleConfirm"
          >
            确定
          </wd-button>
        </slot>
      </view>
    </wd-cell-group>
  </wd-popup>
</template>

<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    title: string
    height?: string
    beforeClose?: () => Promise<boolean> | boolean
  }>(),
  {
    title: '',
  },
)

defineExpose({
  open,
  close,
})

const visible = ref<boolean>(false)
const emit = defineEmits(['open', 'cancel', 'confirm'])

function close() {
  visible.value = false
}

function open() {
  visible.value = true
  emit('open')
}

const handleCancel = () => {
  close()
}

const handleConfirm = () => {
  emit('confirm')
  close()
}
</script>

<style lang="scss" scoped></style>
